﻿<CodeSnippetTabbed DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1#indeterminate-state">
    <CodeSnippetTabPage Text="Razor">@(@"<DxCheckBox @bind-Checked=""@Value"" AllowIndeterminateStateByClick=""true"" DisableDefaultRender>
    <div class=""table position-relative"">
        <div class=""boxLabel"" style=""margin: 10px"">Medium</div>
        <div class=""row"">
            <div class=""boxLabel"" style=""margin: 10px"">Low</div>
            <div class=""flexBox demo-checkBox"">
                <div class=""borderContainer"">
                    <div class=""gradientCircle"" />
                    <div class=""markerContainer"">
                        <div class=""roundMarkerHigh"" />
                    </div>
                    <div class=""markerContainer"" style=""transform: rotate(-90deg)"">
                        <div class=""roundMarkerMedium"" />
                    </div>
                    <div class=""markerContainer"" style=""transform: rotate(-180deg)"">
                        <div class=""roundMarkerLow"" />
                    </div>
                    <div class=""flexBox"" style=""width:100%; transform: rotate(@(-Angle)deg); animation: turn@(Angle) 0.5s ease-out"">
                        <div class=""light"" />
                    </div>
                    <div class=""centerCircle"" />
                    <div class=""markerContainer"" style=""transform: rotate(@(-Angle)deg); animation: turn@(Angle) 0.5s ease-out"">
                        <div class=""marker"" />
                    </div>
                </div>
                <div class=""borderCyrcle"" />
            </div>
            <div class=""boxLabel"" style=""margin: 10px"">Hight</div>
        </div>
    </div>
</DxCheckBox>

@code {
    bool? Value { get; set; } = true;
    int Angle { get { return Value == true ? 0 : Value == false ? 90 : 180; } }
}")</CodeSnippetTabPage>
</CodeSnippetTabbed>
